<template>
  <require from="./status-bar.css"></require>
  <!--
    STATUS BAR
  -->
  <div class="status-bar status-bar--system-macos" id="statusBarContainer">
    <div class="status-bar__left-bar" id="statusBarLeft">
      <a if.bind="updateAvailable" ref="updateDropdownToggle" class="update-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="update-button-icon" src="src/resources/images/icon.png" title.bind="isDownloading ? updateProgressData.percent.toString() + '%' : 'Update available.'">
      </a>
      <div class="dropdown-menu update-dropdown" ref="updateDropdown">
        <template if.bind="!isDownloading && !updateDownloadFinished">
          <div class="update-dropdown-title-container">
            <span class="update-dropdown-title">Version ${updateVersion} available</span>
          </div>
          <a class="update-dropdown-release-notes" click.delegate="showReleaseNotes()">
            Click here for release notes
          </a>
          <div class="update-dropdown-button-container">
            <button class="btn btn-default update-dropdown-cancel-button" click.delegate="hideDropdown()" disabled.bind="updateStarted">Cancel</button>
            <button class="btn btn-primary update-dropdown-update-button" click.delegate="startUpdate()" disabled.bind="updateStarted">Update</button>
          </div>
        </template>
        <template if.bind="isDownloading && !updateDownloadFinished">
          <div class="update-dropdown-title-container">
            <span class="update-dropdown-title">Downloading update</span>
          </div>
          <span class="update-dropdown-text">${(updateProgressData.bytesPerSecond/1000).toFixed(2)} KB/s - ${(updateProgressData.transferred/1000/1000).toFixed(2)} MB of ${(updateProgressData.total/1000/1000).toFixed(2)} MB</span>
          <div class="update-dropdown-progress-container">
            <div class="progress update-dropdown-progressbar">
              <div class="progress-bar progress-bar-striped progress-bar-animated update-dropdown-progressbar-progress" role="progressbar" css="width: ${updateProgressData.percent}%;">${updateProgressData.percent.toFixed(1)}%</div>
            </div>
            <button class="btn btn-default update-dropdown-cancel-download-button" title="Abort download." click.delegate="cancelUpdate()">Abort Download</button>
          </div>
        </template>
        <template if.bind="updateDownloadFinished">
          <div class="update-dropdown-title-container">
            <span class="update-dropdown-title">Update ready</span>
          </div>
          <button class="btn btn-primary update-dropdown-install-button" click.delegate="installUpdate()">Install</button>
          <span class="update-dropdown-install-text">Would you like to install the update now?<br>Otherwise it will be installed when restarting the BPMN Studio.</span>
        </template>
      </div>
    </div>
    <div class="status-bar__center-bar" id="statusBarCenter">
      <div if.bind="showInspectProcessInstanceButtons">
        <a class="status-bar__element" class.bind="showInspectPanel ? 'status-bar__element--active' : ''" click.delegate="toggleInspectPanel()">Inspect Panel</a>
      </div>
      <div class="center-bar__diff-view-buttons" if.bind="diffIsShown">
        <a class="status-bar__element status-bar__diff-view" class.bind="currentDiffMode === diffMode.OldVsNew ? 'status-bar__element--active' : ''" click.delegate="changeDiffMode(diffMode.OldVsNew)" title="Compare the ${previousXmlIdentifier === 'Old' ? previousXmlIdentifier.toLowerCase() : previousXmlIdentifier} diagram with the ${currentXmlIdentifier === 'New' ? currentXmlIdentifier.toLowerCase() : currentXmlIdentifier} diagram" id="statusBarOldVsNew">
          <div class="identifier">${previousXmlIdentifier}</div> vs. <div class="identifier">${currentXmlIdentifier}</div>
          <i class="fa fa-arrow-right arrow-icon"></i>
        </a>
        <a class="status-bar__element" class.bind="showChangeList ? 'status-bar__element--active' : ''" click.delegate="toggleChangeList()" title="Toggle visibility of the Change List" id="statusBarChangesLog">
          <i class="fas fa-bars"></i>
        </a>
        <a class="status-bar__element status-bar__diff-view" class.bind="currentDiffMode === diffMode.NewVsOld ? 'status-bar__element--active' : ''" click.delegate="changeDiffMode(diffMode.NewVsOld)" title="Compare the ${currentXmlIdentifier === 'New' ? currentXmlIdentifier.toLowerCase() : currentXmlIdentifier} diagram with the ${previousXmlIdentifier === 'Old' ? previousXmlIdentifier.toLowerCase() : previousXmlIdentifier} diagram" id="statusBarNewVsOld">
          <i class="fa fa-arrow-left arrow-icon"></i>
          <div class="identifier">${currentXmlIdentifier}</div> vs. <div class="identifier">${previousXmlIdentifier}</div>
        </a>
      </div>
    </div>
    <div class="status-bar__right-bar" id="statusBarRight">
      <template if.bind="showDiagramViewButtons">
        <a class="status-bar__element" click.delegate="toggleXMLView()" if.bind="!xmlIsShown" data-test-status-bar-xml-view-button>
          <i class="fas fa-file-code"></i> Show XML
        </a>
        <a class="status-bar__element" click.delegate="toggleXMLView()" if.bind="xmlIsShown" data-test-status-bar-disable-xml-view-button>
          <i class="fas fa-file-code"></i> Show Diagram
        </a>
        <a class="status-bar__element" click.delegate="toggleDiffView()" if.bind="!diffIsShown" data-test-status-bar-diff-view-button>
          <i class="fa fa-object-group"></i> Show Diff
        </a>
        <a class="status-bar__element" click.delegate="toggleDiffView()" if.bind="diffIsShown" data-test-status-bar-disable-diff-view-button>
          <i class="fa fa-object-group"></i> Show Diagram
        </a>
      </template>
    </div>
  </div>
</template>
